<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 园区管理"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row style="margin: 0" :gutter="15" v-if="zfNameflag">
      <el-col :span="24">
        <div class="box">
          <div class="content-body card">
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo2/化工园区@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ parkCount }}</div>
              </div>
              <div>化工园区</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo2/国家级园区@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ nationalParkCount }}</div>
              </div>
              <div>国家级园区</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo2/三十强园区@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ nationalTopThirtyParkCount }}</div>
              </div>
              <div>全国三十强园区</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo2/十强园区@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ nationalPotentialTopThenParkCount }}</div>
              </div>
              <div>全国潜力十强园区</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo2/企业数量@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ inParkEntCount }}</div>
              </div>
              <div>园区内规上企业数量</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo2/规上入园率@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ standardEntInParkRate }}</div>
              </div>
              <div>规上企业入园率</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="topAll">
          <div class="box3">
            <div class="title"><p>化工园区月度产能利用率TOP5</p></div>
            <div
              id="operatingRate"
              style="width: 100%; height: 200px; margin-top: 10px"
            ></div>
          </div>
          <div class="box3">
            <div class="title"><p>化工园区年度亩均TOP10</p></div>
            <div
              id="perMuT10"
              style="width: 100%; height: 200px; margin-top: 10px"
            ></div>
          </div>
        </div>
        <div class="box1">
          <div class="title"><p>化工园区排名</p></div>
          <div class="content-body">
            <div class="tabs">
              <div
                :class="active === 1 ? 'selectActive' : ''"
                @click="activeClick(1)"
              >
                营收
              </div>
              <div
                :class="active === 2 ? 'selectActive' : ''"
                @click="activeClick(2)"
              >
                税收
              </div>
              <div
                :class="active === 3 ? 'selectActive' : ''"
                @click="activeClick(3)"
              >
                亩均税收
              </div>
              <div
                :class="active === 0 ? 'selectActive' : ''"
                @click="activeClick(0)"
              >
                园区指数
              </div>
              <div style="color: #bbdaff" @click="showParkRank()">
                查看全国园区排名>>
              </div>
            </div>
            <div id="tableColor">
              <el-table
                ref="table"
                :data="tableData"
                style="width: 100%"
                height="250"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  header-align="center"
                  align="center"
                  width="60"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  property="parkName"
                  width="280"
                  :show-overflow-tooltip="true"
                  label="园区名称"
                >
                  <template scope="scope">
                    <span
                      style="
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        cursor: pointer;
                        color: #1492ff;
                      "
                      @click="toDetail(scope.row)"
                      >{{ scope.row.parkName }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  property="showInfo"
                  :show-overflow-tooltip="true"
                  sortable
                  column-key="showInfo"
                  :label="showInfo"
                >
                  <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                    >
                      {{
                        scope.row.showInfo > -1
                          ? scope.row.showInfo
                          : "&nbsp;&nbsp;"
                      }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  property="entCount"
                  :show-overflow-tooltip="true"
                  sortable
                  column-key="entCount"
                  label="企业数"
                >
                  <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.entCount }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  property="parkArea"
                  :show-overflow-tooltip="true"
                  sortable
                  column-key="parkArea"
                  label="占地面积(亩)"
                >
                  <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.parkArea }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  property="cityName"
                  :show-overflow-tooltip="true"
                  label="所在地区"
                  column-key="cityName"
                  :filters="cityList"
                  :filter-method="filterTag"
                  filter-placement="bottom-end"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="box1">
          <div class="title"><p>化工园区环保概览</p></div>
          <div class="content-body">
            <div style="width: 45%">
              <div class="content_title">
                <span></span>
                <span>当月园区水质级别占比</span>
              </div>
              <div id="waterQuality" style="width: 100%; height: 200px"></div>
            </div>
            <div style="width: 55%">
              <div class="content_title">
                <span></span>
                <span>园区环境质量</span>
                <div class="tabs" style="width: 75%; float: right">
                    <!-- <div
                    :class="active1 === 0 ? 'selectActive' : ''"
                    @click="active1Click(0)"
                    >
                    当日空气质量指数
                    </div>
                    <div
                    :class="active1 === 1 ? 'selectActive' : ''"
                    @click="active1Click(1)"
                    >
                    {{dataTime}}年单位排放增加值
                    </div> -->
                    <div @click="environmentMoreShow()">查看更多>></div>
                </div>
              </div>
              <div id="tableColor2">
                <el-table
                  ref="table2"
                  :data="tableData5"
                  style="width: 100%"
                  height="202"
                  :row-style="{ height: '0' }"
                  :cell-style="{ padding: '6px 0' }"
                  stripe
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    header-align="center"
                    align="center"
                    width="60"
                    label="排名"
                  ></el-table-column>
                  <el-table-column
                    property="parkName"
                    width="350"
                    :show-overflow-tooltip="true"
                    label="园区名称"
                  >
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    header-align="center"
                    :label="showInfo1"
                  >
                    <template scope="scope">
                      <div style="overflow: hidden">
                        <span style="font-weight: 600; color: #fff">{{
                          showInfo1 === "AQI"?scope.row.aqi:scope.row.addedValue
                        }}</span>
                        <div style="display: inline-block; float: right" v-show="showInfo1 === 'AQI'?scope.row.dod:scope.row.yoy !== 0">
                          <span
                            style="font-weight: 600"
                            :style="(showInfo1 === 'AQI'?scope.row.dod:scope.row.yoy) > 0 ? 'color: #F64B5C' : 'color: #72E5A8'"
                          >
                            {{ showInfo1 === 'AQI'?scope.row.dod:scope.row.yoy}}%
                            {{ (showInfo1 === 'AQI'?scope.row.dod:scope.row.yoy) > 0 ? "↑" : "↓" }}</span
                          >
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div style="overflow:hidden;margin-top:15px;margin-bottom:10px">
          <div class="box4" style="width: 49%;float:left">
            <div class="title"><p>化工园区应急概览</p></div>
            <div class="content_title">
                <span></span>
                <span>已接入园区应急物资情况</span>
                <div style="display: line-block;color:#FFFFFF;float:right;margin-right: 20px;font-weight: 600">
                    <span>物资总量&nbsp;&nbsp; </span>
                    <span
                    style="
                        background-image: -webkit-linear-gradient(0deg,#ffd39a,#fff99a);
                        -webkit-text-fill-color: transparent;
                        -webkit-background-clip: text;
                    "
                    >{{total}}</span>
                </div>
            </div>
            <div id="material" style="width: 100%;height:335px"></div>
          </div>
          <div class="box4" style="width: 49%;float:right">
                <div class="title"><p>化工园区安全概览</p></div>
                <div class="content-body">
                    <div class="content_title">
                        <span></span>
                        <span>园区安全等级分布</span>
                    </div>
                    <div id="gradeDistribution" style="width: 100%;height:150px"></div>
                    <div class="tabs" style="width: 75%; float: right">
                        <div style="padding: 0;" @click="securityMoreShow()">查看更多>></div>
                    </div>
                    <div id="tableColor3">
                        <el-table
                        ref="table3"
                        :data="tableData6"
                        style="width: 100%"
                        height="150"
                        :row-style="{ height: '0' }"
                        :cell-style="{ padding: '6px 0' }"
                        stripe
                        :row-class-name="tableRowClassName"
                        >
                        <el-table-column
                            type="index"
                            header-align="center"
                            align="center"
                            width="60"
                            label="序号"
                        ></el-table-column>
                        <el-table-column
                            property="parkName"
                            width="300"
                            :show-overflow-tooltip="true"
                            label="园区名称"
                        >
                        </el-table-column>
                        <el-table-column
                            property="level"
                            :show-overflow-tooltip="true"
                            align="center"
                            header-align="center"
                            label="安全等级"
                            column-key="level"
                            :filters="safeList"
                            :filter-method="filterTag1"
                            filter-placement="bottom-end"
                        >
                        </el-table-column>
                        </el-table>
                    </div>
                </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
          <div class="box5">
            <div class="title"><p>化工园区分布</p></div>
            <div style="position: relative;">
                <div id="map" style="width: 100%; height: 562px"></div>
                <div style="position: absolute;bottom: 0;color:#00E4FF;font-size: 12px">此页面经济相关数据来源时间：{{dataTime}}年</div>
            </div>
          </div>
          <div class="box2" style="margin-top: 15px">
            <div class="title"><p>化工园区能源概览</p></div>
            <div class="content_title" style="padding-bottom: 0">
                <span></span>
                <span>已接入园区能源消耗总量</span>
            </div>
            <div
              id="totalConsumption"
              style="width: 100%; height: 250px; margin-top: 10px"
            ></div>
            <div class="content_title" style="margin-top: 10px">
                <span></span>
                <span>园区能源消耗排名</span>
                <div class="tabs" style="width: 70%; float: right">
                    <!-- <div
                    :class="active2 === 0 ? 'selectActive' : ''"
                    @click="active2Click(0)"
                    >
                    {{dataTime}}年单位能耗增加值
                    </div>
                    <div
                    :class="active2 === 1 ? 'selectActive' : ''"
                    @click="active2Click(1)"
                    >
                    当月能耗
                    </div> -->
                    <div style="padding:0;margin-top:5px" @click="energyMoreShow()">查看更多>></div>
                </div>
            </div>
            <div id="consumptionRanking" style="width: 100%;height:335px;margin-top: 20px"></div>
          </div>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="moreShow"
      class="content-body"
      width="50%"
      custom-class="black"
    >
      <div class="tabs">
        <div
          :class="popupActive1 === 0 ? 'selectActive' : ''"
          @click="popupActive1Click(0)"
        >
          全国三十强
        </div>
        <div
          :class="popupActive1 === 1 ? 'selectActive' : ''"
          @click="popupActive1Click(1)"
        >
          全国潜力十强
        </div>
        <div></div>
      </div>
      <div id="tableColor1">
        <el-table
          ref="table1"
          :data="showTableData1"
          style="width: 100%"
          height="450"
          stripe
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            :property="
              popupActive1 === 0
                ? 'nationalParkTopThirty'
                : 'nationalPotentialParkTopTen'
            "
            header-align="center"
            align="center"
            label="排名"
          ></el-table-column>
          <el-table-column
            property="parkName"
            :show-overflow-tooltip="true"
            label="园区名称"
          >
          </el-table-column>
          <el-table-column
            property="provinceName"
            header-align="center"
            align="center"
            label="所在省份"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="moreShow1"
      class="content-body"
      width="90%"
      custom-class="black"
    >
      <!-- <div class="tabs">
        <div
          :class="popupActive2 === 0 ? 'selectActive' : ''"
          @click="popupActive2Click(0)"
        >
          当日空气质量指数
        </div>
        <div
          :class="popupActive2 === 1 ? 'selectActive' : ''"
          @click="popupActive2Click(1)"
        >
          {{dataTime}}年单位排放增加值
        </div>
        <div></div>
      </div> -->
      <div id="showTableColor2">
        <el-table
          :data="showTableData2"
          style="width: 100%"
          height="350"
          :row-style="{ height: '0' }"
          :cell-style="{ padding: '6px 0' }"
          stripe
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            width="60"
            label="排名"
          ></el-table-column>
          <el-table-column v-for="(item,index) in showTableTitle2" :key="index"
            :show-overflow-tooltip="true"
            align="center"
            header-align="center"
            :property="item"
            :label="index !== 0?showInfo11+'('+item+')':item"
          >
            <!-- <template scope="scope">
              <div style="overflow: hidden">
                <span style="font-weight: 600; color: #fff">{{
                  showInfo1 === "AQI"?scope.row.aqi:scope.row.addedValue
                }}</span>
              </div>
            </template> -->
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="moreShow2"
      class="content-body"
      width="50%"
      custom-class="black"
    >
      <div id="showTableColor3">
        <el-table
          :data="showTableData3"
          style="width: 100%"
          height="350"
          :row-style="{ height: '0' }"
          :cell-style="{ padding: '6px 0' }"
          stripe
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            width="60"
            label="序号"
          ></el-table-column>
          <el-table-column
            property="parkName"
            width="350"
            :show-overflow-tooltip="true"
            label="园区名称"
          >
          </el-table-column>
          <el-table-column
            property="level"
            :show-overflow-tooltip="true"
            align="center"
            header-align="center"
            label="安全等级"
            column-key="level"
            :filters="safeList"
            :filter-method="filterTag1"
            filter-placement="bottom-end"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="moreShow3"
      class="content-body"
      width="90%"
      custom-class="black"
    >
    <div style="text-align: right;font-weight: 600;margin-bottom: 10px;color: #52ccff">数据年份: {{timeSlot}}&nbsp;&nbsp;单位: 吨标煤</div>
      <!-- <div class="tabs">
        <div
          :class="popupActive3 === 0 ? 'selectActive' : ''"
          @click="popupActive3Click(0)"
        >
          {{dataTime}}年单位能耗增加值
        </div>
        <div
          :class="popupActive3 === 1 ? 'selectActive' : ''"
          @click="popupActive3Click(1)"
        >
          当月能耗
        </div>
        <div></div>
      </div> -->
      <div id="showTableColor3">
        <el-table
          :data="showTableData4"
          style="width: 100%"
          height="350"
          :row-style="{ height: '0' }"
          :cell-style="{ padding: '6px 0' }"
          stripe
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            width="60"
            label="排名"
          ></el-table-column>
          <el-table-column v-for="(item,index) in showTableTitle4" :key="index"
            :property="item"
            :show-overflow-tooltip="true"
            :label="item"
          >
          </el-table-column>
          <!-- <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            header-align="center"
            :label="showInfo11"
          >
            <template scope="scope">
              <div style="overflow: hidden">
                <span style="font-weight: 600; color: #fff">{{
                  showInfo11 === "AQI"?scope.row.aqi:scope.row.addedValue
                }}</span>
                <div style="display: inline-block; float: right" v-show="showInfo11 === 'AQI'?scope.row.dod:scope.row.yoy !== 0">
                  <span
                    style="font-weight: 600"
                    :style="
                      showInfo11 === 'AQI'?scope.row.dod:scope.row.yoy > 0
                        ? 'color: #F64B5C'
                        : 'color: #72E5A8'
                    "
                  >
                    {{ showInfo11 === 'AQI'?scope.row.dod:scope.row.yoy > 0 ? "↑" : "↓" }}</span
                  >
                  <span
                    style="font-weight: 600"
                    :style="
                      showInfo11 === 'AQI'?scope.row.dod:scope.row.yoy > 0
                        ? 'color: #F64B5C'
                        : 'color: #72E5A8'
                    "
                  >
                    {{ showInfo11 === 'AQI'?scope.row.dod:scope.row.yoy }}</span
                  >
                </div>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dd from "gdt-jsapi";
import govheader from "@/components/govheader2";
import govnavigation from "@/components/govnavigation2";
const echarts = require("echarts");
export default {
  name: "zfParkOverview",
  components: { govheader, govnavigation },
  data() {
    return {
      zfNameflag: true,
      dataTime: '',
      date: "",
      center: {},
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [
        {
          parkName: "宁波石化经济技术开发区",
          aqi: "187",
          addedValue: '666',
          dod: "2.6",
          yoy:1
        },
        {
          parkName: "建德高新",
          aqi: "41",
          addedValue: '888',
          dod: "-1.8",
          yoy: -1
        },
      ],
      tableData6: [],
      topTenData: [],
      topThirtyData: [],
      showTableData1: [],
      showTableData2: [],
      showTableTitle2: [],
      showTableData3: [],
      showTableTitle3: [],
      showTableData4: [],
      showTableTitle4: [],
      active: 1,
      active1: 0,
      active2: 0,
      popupActive1: 0,
      popupActive2: 0,
      popupActive3: 0,
      showInfo: "营收(亿元)",
      showInfo1: "AQI",
      showInfo11: "AQI",
      moreShow: false,
      moreShow1: false,
      moreShow2: false,
      moreShow3: false,
      myChart1: "",
      myChart2: "",
      myChart3: "",
      myChart4: "",
      option1: "",
      option2: "",
      option3: "",
      option4: "",
      parkCount: "",
      nationalParkCount: "",
      nationalTopThirtyParkCount: "",
      nationalPotentialTopThenParkCount: "",
      inParkEntCount:'',
      standardEntInParkRate: '',
      total: 0,
      cityList: [
        {text:'杭州市',value: '杭州市'},
        {text:'宁波市',value: '宁波市'},
        {text:'嘉兴市',value: '嘉兴市'},
        {text:'湖州市',value: '湖州市'},
        {text:'绍兴市',value: '绍兴市'},
        {text:'金华市',value: '金华市'},
        {text:'衢州市',value: '衢州市'},
        {text:'台州市',value: '台州市'},
        {text:'丽水市',value: '丽水市'},
        {text:'温州市',value: '温州市'},
        {text:'舟山市',value: '舟山市'},
      ],
      safeList:[
        {text:'低风险',value: '低风险'},
        {text:'一般风险',value: '一般风险'},
        {text:'较大风险',value: '较大风险'},
        {text:'重大风险',value: '重大风险'},
      ],
      colorList: [
        "rgb(109,104,255)",
        "rgb(0,239,254)",
        "rgb(68,215,182)",
        "rgb(255,166,0)",
        "rgb(152,123,255)",
        "rgb(118,190,204)",
      ],
      colorList1: [
        'rgb(4,32,245)',
        'rgb(0,96,255)',
        'rgb(109,212,0)',
        'rgb(254,219,101)',
        'rgb(163,10,235)',
        'rgb(0,135,146)'
      ],
      optionData4: [],
      optionData6: [],
      optionData6Total: '',
      timeSlot: ''
    }
  },
  created() {
    if (window.SITE_CONFIG["sitURL"] === "https://www.plantmate.com/api") {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: "20",
              authCode: res.auth_code,
            };
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false;
                }
              })
              .catch(() => {
                this.zfNameflag = false;
              });
          }
        })
        .catch(() => {
          this.zfNameflag = false;
        });
    }
  },
  mounted() {
    if (this.zfNameflag) {
      this.date = this.getDateTime(new Date())
    // this.date = '2022-01-10'
      this.$http
        .post(`/home/government/govParkOverview/getParkOverview`, {
          searchDate: this.date,
        })
        .then(({ data: res }) => {
          this.dataTime = res.data.year
          this.parkCount = res.data.parkInfoCount.parkCount;
          this.nationalParkCount = res.data.parkInfoCount.nationalParkCount;
          this.nationalTopThirtyParkCount =
            res.data.parkInfoCount.nationalTopThirtyParkCount;
          this.nationalPotentialTopThenParkCount =
            res.data.parkInfoCount.nationalPotentialTopThenParkCount;
          this.inParkEntCount = res.data.parkInfoCount.inParkEntCount;
          this.standardEntInParkRate = res.data.parkInfoCount.standardEntInParkRate;
          this.tableData1 = res.data.parkIndexList;
          this.tableData2 = res.data.incomeList;
          this.tableData3 = res.data.taxList;
          this.tableData4 = res.data.perMuTaxList;
          this.tableData = this.tableData2;
          this.tableData5 = res.data.parkEnvOverview.parkAirQuality
          let num1 = 0
          res.data.parkSafeOverview.levelDistribution.forEach(item=>{
            this.optionData6Total += Number(item.value)
            if (num1 === this.colorList1.length) {
              num1 = 0
            }
            this.optionData6.push({
              name: item.name,
              value: Number(item.value),
              itemStyle: {
                color: this.colorList[num1],
                color1: this.colorList1[num1]
              }
            })
            num1++
          })
          this.tableData6 = res.data.parkSafeOverview.parkSafetyLevelSort
          res.data.incomeList.forEach((item) => {
            this.center[item.parkAbbreviation] = [
              item.longitude,
              item.latitude,
              item.parkAddr,
              item.standEntCount,
              item.showInfo,
              item.parkCode
            ];
          });
          this.renderMyChart();
          this.getOperatingRate();
          this.option1.series[0].data = res.data.parkMonthTop5.beginPerList
          this.option1.xAxis[0].data = res.data.parkMonthTop5.parkNameList
          this.myChart1.setOption(this.option1);
          this.getPerMuT10();
          this.option3.series[0].data = res.data.parkYearPerMuTop10.perList
          this.option3.series[1].data = res.data.parkYearPerMuTop10.perList
          this.option3.xAxis.data = res.data.parkYearPerMuTop10.parkNameList
          this.myChart3.setOption(this.option3);
          let num = 0
          res.data.parkEnvOverview.waterQualityLevelRate.forEach((item,index)=>{
              if (num === this.colorList.length) {
                num = 0
              }
              if (item.level === 1) {
                item.level = 'Ⅰ类'
              }else if (item.level === 2) {
                item.level = 'Ⅱ类'
              }else if (item.level === 3) {
                item.level = 'Ⅲ类'
              }else if (item.level === 4) {
                item.level = 'Ⅳ类'
              }else if (item.level === 5) {
                item.level = 'Ⅴ类'
              }
              this.optionData4.push({
                  name:item.level,
                  value:item.levelCount,
                  itemStyle:{
                      color: this.colorList[num],
                      color1: this.colorList1[num]
                  }
              })
              num++
          })
          this.getWaterQuality();
          this.getMaterial()
          res.data.parkEmergencyOverview.forEach(item=>{
              this.total += item.materialQty
              this.option5.yAxis.data.push(item.materialName)
              this.option5.series[0].data.push(item.materialQty)
          })
          this.myChart5.setOption(this.option5);
          this.getGradeDistribution()
          this.getTotalConsumption()
          this.parkEnergyOverview = res.data.parkEnergyOverview
          this.option7.xAxis.data = res.data.parkEnergyOverview.yearList
          this.option7.series[0].data = res.data.parkEnergyOverview.y1List
          this.option7.series[1].data = res.data.parkEnergyOverview.y2List
          this.myChart7.setOption(this.option7);
          this.getConsumptionRanking()
          this.option8.yAxis.data = res.data.parkEnergyOverview.parkNameList
          this.option8.series[0].data = res.data.parkEnergyOverview.unitAddValueList
          this.myChart8.setOption(this.option8);
          this.getright_table();
          this.getright_table2()
          this.getright_table3()
        })
        .catch(() => {});
    }
  },
  beforeDestroy() {
    let _this = this;
    clearInterval(_this.intervalId);
    clearInterval(_this.intervalId1);
    clearInterval(_this.intervalId2);
    clearInterval(_this.intervalId3);
    clearInterval(_this.startCharts2);
    clearInterval(_this.timer1);
    clearInterval(_this.timer3);
    clearInterval(_this.timer4);
    clearInterval(_this.timer5);
    clearInterval(_this.timer6);
    clearInterval(_this.timer7);
    clearInterval(_this.timer8);
  },
  methods: {
    zfNameflagChange(val) {
      this.zfNameflag = val;
    },
    getright_table() {
      var isScroll = true;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table1() {
      var isScroll = true;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId1 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table2() {
      var isScroll = true;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table2;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId2 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table3() {
      var isScroll = true;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table3;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId3 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent("on" + sEvent, fn);
      } else {
        obj.addEventListener(sEvent, fn, false);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    activeClick(val) {
      let _this = this;
      this.active = val;
      if (val === 0) {
        this.showInfo = "园区指数";
      } else if (val === 1) {
        this.showInfo = "营收(亿元)";
      } else if (val === 2) {
        this.showInfo = "税收(亿元)";
      } else if (val === 3) {
        this.showInfo = "亩均税收(万元)";
      }
      let tableData = "tableData" + (val + 1);
      this.tableData = this[tableData];
      clearInterval(_this.intervalId);
      this.$refs.table.bodyWrapper.scrollTop = 0;
      this.getright_table();
    },
    popupActive1Click(val) {
      let _this = this;
      this.popupActive1 = val;
      if (val === 0) {
        this.showTableData1 = this.topThirtyData;
      } else if (val === 1) {
        this.showTableData1 = this.topTenData;
      }
      clearInterval(_this.intervalId1);
      this.$refs.table1.bodyWrapper.scrollTop = 0;
      this.getright_table1();
    },
    popupActive2Click(val){
      this.popupActive2 = val;
      this.getShowTableData2()
    },
    popupActive3Click(val){
      let _this = this;
      this.popupActive3 = val;
      // if (val === 0) {
      //   this.showInfo11 = "AQI";
      //   this.$http
      //   .post(`/home/government/govParkOverview/selectAirQualityIndexList`, {
      //     searchDate: this.date,
      //   })
      //   .then(({ data: res }) => {
      //       _this.showTableData3 = res.data
      //   })
      //   .catch(() => {});
      // } else if (val === 1) {
      //   this.showInfo11 = "单位排放增加值";
      //   this.$http
      //   .post(`/home/government/govParkOverview/selectAddedValueList`, {
      //     searchDate: this.date,
      //   })
      //   .then(({ data: res }) => {
      //       _this.showTableData3 = res.data
      //   })
      //   .catch(() => {});
      // }
    },
    active1Click(val) {
      let _this = this;
      this.active1 = val;
      if (val === 0) {
        this.showInfo1 = "AQI";
        this.$http
        .post(`/home/government/govParkOverview/selectAirQualityIndexList`, {
          searchDate: this.date,
        })
        .then(({ data: res }) => {
            _this.tableData5 = res.data
        })
        .catch(() => {});
      } else if (val === 1) {
        this.showInfo1 = "单位排放增加值";
        this.$http
        .post(`/home/government/govParkOverview/selectAddedValueList`, {
          searchDate: this.date,
        })
        .then(({ data: res }) => {
            _this.tableData5 = res.data
        })
        .catch(() => {});
      }
      clearInterval(_this.intervalId2);
      this.$refs.table2.bodyWrapper.scrollTop = 0;
      this.getright_table2();
    },
    active2Click(val) {
      let _this = this;
      clearInterval(_this.timer8);
      _this.myChart8.dispose();
      _this.active2 = val;
      _this.getConsumptionRanking()
      _this.$nextTick(()=>{
      if (val === 0) {
        _this.option8.yAxis.data = _this.parkEnergyOverview.parkNameList
        _this.option8.series[0].data = _this.parkEnergyOverview.unitAddValueList
      } else {
        _this.option8.yAxis.data = _this.parkEnergyOverview.energyMonthNameList
        _this.option8.series[0].data = _this.parkEnergyOverview.energyMonthValueList
      }
      _this.myChart8.setOption(_this.option8);
      })
    },
    toDetail(val) {
      this.$router.push({
        name: "zfParkOverviewDetailtwin",
        query: {
          parkCode: val.parkCode,
          parkName: val.parkName,
          longitude: val.longitude,
          latitude: val.latitude,
          year: this.date,
        },
      });
    },
    showParkRank() {
      this.moreShow = true;
      this.$http
        .post(`/home/government/govParkOverview/getAllParkRank`, {
          searchDate: this.date,
        })
        .then(({ data: res }) => {
          this.topTenData = res.data.topTen;
          this.topThirtyData = res.data.topThirty;
          this.showTableData1 = this.topThirtyData;
          this.getright_table1();
        })
        .catch(() => {});
    },
    environmentMoreShow(){
      this.moreShow1 = true
      this.popupActive2 = this.active1
      this.getShowTableData2()
    },
    getShowTableData2(){
      this.$http
        .post(`/home/government/govParkOverview/getParkEnvPopup`, {
          searchDate: this.date,
        })
        .then(({ data: res }) => {
          if (this.popupActive2 === 0) {
            this.showInfo11 = "AQI";
            this.showTableTitle2 = res.data.dayParkAirQuality.title
            this.showTableData2 = res.data.dayParkAirQuality.data
          } else {
            this.showInfo11 = "单位排放增加值";
            this.showTableTitle2 = res.data.yearAddedValue.title
            this.showTableData2 = res.data.yearAddedValue.data
          }
        })
        .catch(() => {});
    },
    securityMoreShow(){
      this.moreShow2 = true
       this.$http
        .post(`/home/government/govParkOverview/getParkSafetyLevelPopup`, {
          searchDate: this.date
        })
        .then(({ data: res }) => {
          this.showTableData3 = res.data
        })
        .catch(() => {});
    },
    energyMoreShow(){
      this.moreShow3 = true
      this.popupActive3 = this.active2
      this.$http
        .post(`/home/government/govParkOverview/selectMonthEnergyPopup`, {
          searchDate: this.date
        })
        .then(({ data: res }) => {
          this.showTableData4 = res.data.data
          let arr = []
          this.showTableTitle4 = res.data.title.map(item =>{
            var username = ''
            if (item != '园区名称') {
              var z = String(item).substring(0, 4) // 显示年
              var name = String(item).substring(8 - 4, 8)// 显示月
              if (name > 9) {
                username = name +'月'
              } else {
                var usernameage = name.split('')
                username = usernameage[usernameage.length - 1] + '月'
              }
              arr.push(z)
              // console.log(username)
            } else {
              username = item
            }
            return username
          })
          if (arr[0] === arr[arr.length-1]) {
            this.timeSlot = arr[0]
          } else {
            this.timeSlot = arr[0] + '-' + arr[arr.length-1]
          }
        })
        .catch(() => {});
    },
    renderMyChart() {
      let _this = this;
      this.myChart2 = echarts.init(document.getElementById("map"));
      let uploadedDataURL = require("../zhejiang.json");
      let scatterData1 = [];
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item));
      }
      echarts.registerMap("js", uploadedDataURL);
      this.option2 = {
        // title: {
        //   text: "化工园区分布",
        //   top: "10px",
        //   right: "10px",
        //   textStyle: {
        //     width: "100%",
        //     color: "#1c4ca1",
        //   },
        // },
        tooltip: {
          trigger: "item",
          extraCssText: "z-index: 999",
          // backgroundColor:'rgba(19, 130, 221,0.6)',
          backgroundColor: null,
          borderColor: "#333",
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: "#ffffff",
          },
          formatter: function (para) {
            // console.log(para);
            if (para.seriesType === "effectScatter") {
              return (
                `<div style="text-align: left;font-size:12px;padding:10px;color:#ffffff;width:200px;overflow:hidden;white-space: pre-wrap;background: url(${require("../../../../assets/img/industry/zfParkOverviewTwo/地图数据框3@2x.png")});background-repeat: no-repeat;background-size: 100% 100%;">` +
                '<div style="text-align: center;font-size:16px;font-weight:600;color:#02D9FD;">' +
                para.data[6] +
                "</div>" +
                "<div>规上企业数: " +
                para.data[3] +
                "</div>" +
                //  + '<div>主要产业: '+ para.data[5] + '</div>'
                "<div>年度产业营收: " +
                para.data[4] +
                "(亿元)</div>" +
                "<div>园区地址: " +
                para.data[2] +
                "</div>" +
                `</div>`
              );
            } else {
              return "";
            }
          },
        },
        geo: [
          {
            map: "js",
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: "100%",
            layoutCenter: ["54%", "50%"],
            zoom: 1,
            itemStyle: {
              areaColor: "#113D8D",
              borderColor: "rgb(27, 172, 255)",
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#005ddc",
              },
              label: {
                show: true,
                color: "#FFFFFF",
              },
            },
            label: {
              show: true,
              color: "#bbdaff",
            },
            zlevel: 3,
          },
        ],
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            itemStyle: {
              normal: {
                color: "rgb(0, 141, 221)",
              },
            },
            label: {
              // normal: {
              formatter: function (para) {
                return "";
              },
              //                 position: "right",
              //                 color: "#333333",
              //                 borderColor: '#005DDC',
              //                 borderWidth: 1,
              //                 borderType: 'solid',
              //                 padding: 5,
              //                 backgroundColor: 'rgba(255, 255, 255, 1)',
              //                 show: false,
              // },
            },
            emphasis: {
              label: {
                show: true,
              },
              itemStyle: {
                color: "rgb(255, 155, 55)",
                borderColor: "rgb(255, 155, 55)",
                borderWidth: 6,
              },
            },
            symbol: "circle",
            symbolSize: 6,
            data: scatterData1,
            zlevel: 10,
          },
        ],
      };
      this.myChart2.setOption(this.option2);
      this.mapAutoPlay(_this.myChart2, _this.option2, "startCharts2");
    },
    getOperatingRate() {
      let _this = this;
      this.myChart1 = echarts.init(document.getElementById("operatingRate"));
      this.option1 = {
        animationDuration: 2000,
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        grid: {
          left: "5%",
          right: "4%",
          top: "10%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["头门港", "建德高新", "宁波石化", "镇海园区", "宁波经济"],
            axisLabel: {
              color: "#BFF7FF",
              fontSize: 10,
              interval: 0,
            },
            axisLine: {
              lineStyle: {
                color: "#BFF7FF",
              },
            },
          },
        ],
        yAxis: {
          type: "value",
          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
          axisLabel:{
            formatter:(param)=>{
              return param + '%'
            }
          },
          splitLine: {//分割线配置
            lineStyle: {
              opacity:.2
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(2, 198, 255, 1)" },
                { offset: 1, color: "rgba(2, 198, 255, 0)" },
              ]),
            },
            data: [470, 320, 470, 320, 320],
          },
        ],
      };
      this.myChart1.setOption(this.option1);
      this.autoPlay(_this.myChart1, _this.option1, "timer1");
    },
    getPerMuT10() {
      let _this = this;
      this.myChart3 = echarts.init(document.getElementById("perMuT10"));
      this.option3 = {
        animationDuration: 2000,
        tooltip: {
          trigger: "axis",
          show: false,
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 40,
        },
        xAxis: {
          axisLabel: {
            color: "#BFF7FF",
            fontSize: 10,
            interval: 0,
          },
          axisTick: {
            lineStyle: {
              color: "#BFF7FF",
            },
            show: true,
          },
          splitLine: {
            show: false,
          },
          data: [
            "头门港",
            "建德高新",
            "宁波石化",
            "镇海园区",
            "宁波经济",
            "头门港",
            "建德高新",
            "宁波石化",
            "镇海园区",
            "宁波经济",
          ],
          type: "category",
        },
        yAxis: {
          name: '万元',
          nameTextStyle:{
            color: "#BFF7FF"
          },
          axisLabel: {
            color: "#BFF7FF",
            fontSize: 12,
          },
          splitLine: {//分割线配置
            lineStyle: {
              opacity:.2
            }
          },
          axisTick: {
            lineStyle: {
              color: "#BFF7FF",
              width: 1,
            },
            show: true,
          },
        },
        series: [
          {
            data: [470, 320, 470, 320, 320, 470, 320, 470, 320, 320],
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 30,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0b9eff",
                  },
                  {
                    offset: 1,
                    color: "#63caff",
                  },
                ],
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#fff",
            },
          },
          {
            data: [470, 320, 470, 320, 320, 470, 320, 470, 320, 320],
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [30, 12],
            zlevel: 2,
          },
        ],
      };
      this.myChart3.setOption(this.option3);
      this.autoPlay(_this.myChart3, _this.option3, "timer3");
    },
    getWaterQuality() {
      let _this = this;
      this.myChart4 = echarts.init(document.getElementById("waterQuality"));
      var data = [];
      var data1 = [];

      var seriesOption = [
        // 最外层圆
        {
          type: "pie",
          radius: ["65%", "45%"],
          center: ["50%", "50%"],
          // hoverAnimation: false,
          data: [],
          label: {
            show: false,
            position: "outside",
            formatter: "{d}%",
            color: "#FFFFFF",
          },
          labelLine: {
            normal: {
              length: 80,
              lineStyle: {
                width: 1,
              },
            },
          },
        },
        // 内圆 + 中间文字
        {
          type: "pie",
          radius: ["50%", "30%"],
          center: ["50%", "50%"],
          // hoverAnimation: false,
          // z: 10,
          label: {
            show: false,
            position: "center",
            formatter: () => {
              return "佣金总额\r\n{total|100} 个";
            },
            rich: {
              total: {
                fontSize: 24,
                color: "#FFFFFF",
              },
            },
            color: "#FFFFFF",
            fontSize: 16,
            lineHeight: 30,
          },
          data: [],
          labelLine: {
            show: false,
          },
        },
      ];
      for (let i = 0; i < _this.optionData4.length; i++) {
        data.push({
          value: _this.optionData4[i].value,
          name: _this.optionData4[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.optionData4[i].itemStyle.color1, // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.optionData4[i].itemStyle.color, // 100% 处的颜色
                  },
                ],
              },
            },
          },
        });
        data1.push({
          value: _this.optionData4[i].value,
          name: _this.optionData4[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.optionData4[i].itemStyle.color1, // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.optionData4[i].itemStyle.color, // 100% 处的颜色
                  },
                ],
              },
              opacity: 0.5,
            },
          },
        });
      }
      seriesOption[0].data = data;
      seriesOption[1].data = data1;

      this.option4 = {
        tooltip: {
          trigger: "item",
          confine: true,
          padding: [0, 5],
          backgroundColor: "rgba(0,0,0,.5)",
          extraCssText:
            "width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100",
          formatter: function (params) {
            let percent = 0;
            let total = 0;
            for (let i = 0; i < _this.optionData4.length; i++) {
              total += _this.optionData4[i].value;
            }
            percent = Number(((params.value / total) * 100).toFixed(0));
            if (params.name !== "") {
              return (
                params.name +
                " : " +
                params.value +
                "个,占比 : " +
                percent +
                "%"
              );
            } else {
              return "";
            }
          },
        },
        legend: {
          show: true,
          right: 20,
          top: 'center',
          orient: "vertical",
          // left: 'center',
          textStyle: {
            // 图例文字的样式
            color: '#fff'
            // fontSize: 14
          }
          // itemWidth: 8
          // itemHeight: 12
        },
        series: seriesOption,
      };

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }
      this.myChart4.setOption(this.option4, true);
      this.autoPlay(_this.myChart4, _this.option4, "timer4");
    },
    getMaterial(){
      let _this = this;
      this.myChart5 = echarts.init(document.getElementById("material"));
      this.option5 = {
        // animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}个",
          padding: [0, 5],
          extraCssText:"z-index: 100",
        },
        color: ["#13B9FB"],
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 8,
            yAxisIndex: [0],
            zoomLock: false,
          },
        ],

        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
          splitLine: {//分割线配置
            lineStyle: {
              opacity:.2
            }
          }
        },
        yAxis: {
          type: "category",
          // boundaryGap: false,
          data: [],

          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(189, 231, 253, .5)",
                  },
                  {
                    offset: 0.3,
                    color: "rgba(1, 216, 223, .8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(1, 216, 223, 1)",
                  },
                ]),
              },
            },

            data: [],
          },
        ],
      };
      this.myChart5.setOption(this.option5);
      this.autoPlay(_this.myChart5, _this.option5, 'timer5')
    },
    getGradeDistribution() {
      let _this = this;
      this.myChart6 = echarts.init(
        document.getElementById("gradeDistribution")
      );
      var data = [];

      var seriesOption = [{
            type: 'pie',
            radius: [0, '80%'],
            label: {
              show: false,
              color: '#09F9D0',
              lineHeight: 24,
              // formatter: e => {
              //     return `${e.name}\n销售量: ${e.data.value}人\n良品率: ${e.data.rate}%`
              // }
            },
            labelLine: {
                length: 20,
                lineStyle: {
                    color: '#09F9D0'
                }
            },
            itemStyle: {
                borderWidth: 2,
                borderColor: 'rgba(255,255,255,.5)',
                // 阴影
                shadowColor: 'rgba(0, 0, 0, .2)',
                shadowBlur: 6,
                shadowOffsetY: 4
            },
            data: []
        }
      ];
      for (let i = 0; i < _this.optionData6.length; i++) {
        let json =  {
          type: 'bar',
          name: _this.optionData6[i].name,
          max: 100, // 100 的比例
          data: [65], // 控制半径占比
          barWidth: (_this.optionData6[i].value / _this.optionData6Total) * 100 + '%', // 控制和饼图角度一致
          barGap: 0,
          itemStyle: {
            color: _this.optionData6[i].itemStyle.color,
            shadowColor: _this.optionData6[i].itemStyle.color,
            shadowBlur: 6
          },
          coordinateSystem: 'polar',
      }
        data.push(
          {
            value: _this.optionData6[i].value,
            rate: _this.optionData6[i].value,
            name: _this.optionData6[i].name,
            itemStyle: {
              color: _this.optionData6[i].itemStyle.color1,
            }
          },
      );
      seriesOption.push(json)
    }
    seriesOption[0].data = data
    this.option6 = {
      // 背景颜色
      // backgroundColor: '#0D1223',
      tooltip: {
        trigger: 'item',
        confine: true,
        padding: [0, 5],
        backgroundColor: 'rgba(0,0,0,.5)',
        extraCssText:'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
        formatter: function(params){
          let percent = 0;
          let total = 0;
          for (let i = 0; i < _this.optionData6.length; i++) {
            total += _this.optionData6[i].value;
          }
          percent = Number(((params.value / total) * 100).toFixed(0));
          if (params.name !== '') {
            return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%';
          } else {
            return '';
          }
        },
      },
      angleAxis: {
        type: 'category',
        // 去掉边线
        axisLine: {
            show: false
        },
      },
      radiusAxis: {
        max: 100,
        // 去掉刻度线
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
      },
      polar: {
          radius: [0, '80%']
      },
      series: seriesOption
    };
      this.myChart6.setOption(_this.option6);
      this.autoPlay(_this.myChart6, _this.option6, 'timer6')
    },
    getTotalConsumption(){
      let _this = this;
      this.myChart7 = echarts.init(document.getElementById("totalConsumption"));
      this.option7 = {
        animationDuration: 2000,
        tooltip: {
          trigger: "axis",
          extraCssText:"z-index: 100",
          show: true,
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 30,
          bottom: 10,
          top: 60,
        },
        legend: {
            show: true,
            textStyle:{
                color: '#fff'
            },
        },
        xAxis: {
          axisLabel: {
            color: "#BFF7FF",
            fontSize: 10,
            interval: 0,
          },
          axisTick: {
            lineStyle: {
              color: "#BFF7FF",
            },
            show: true,
          },
          splitLine: {
            show: false,
          },
          data: [
            "2016",
            "2017",
            "2018",
            "2019",
            "2020",
            "2021"
          ],
          type: "category",
        },
        yAxis: [{
          name: '亿元',
          type: 'value',
          // min: 0,
          // max: 250,
          // interval: 50,
          nameTextStyle:{
            color: '#fff'
          },
          axisLabel: {
            color: "#BFF7FF",
            fontSize: 12,
          },
          splitLine: {//分割线配置
            lineStyle: {
              opacity:.2
            }
          },
          axisTick: {
            lineStyle: {
              color: "#BFF7FF",
              width: 1,
            },
            show: true,
          },
        },
        {
          name: '万吨标煤',
          type: 'value',
          // min: 0,
          // max: 25,
          // interval: 5,
          nameTextStyle:{
            color: '#fff'
          },
          axisLabel: {
            color: "#BFF7FF",
            fontSize: 12,
          },
          splitLine: {//分割线配置
            lineStyle: {
              opacity:.2
            }
          },
          axisTick: {
            lineStyle: {
              color: "#BFF7FF",
              width: 1,
            },
            show: true,
          },
        }],
        series: [
          {
            name: '能源生产总量',
            data: [470, 320, 470, 320, 320, 470],
            type: "bar",
            color: '#0b9eff',
            barWidth: 25,
          },
          {
            name: '同比增速',
            type: "line",
            data: [470, 320, 470, 320, 320, 470],
            color: '#EA8C47',
            yAxisIndex: 1,
          }
        ],
      };
      this.myChart7.setOption(this.option7);
      this.autoPlay(_this.myChart7, _this.option7, "timer7");
    },
    getConsumptionRanking(){
      let _this = this;
      this.myChart8 = echarts.init(document.getElementById("consumptionRanking"));
      this.option8 = {
        // animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}吨标煤",
          padding: [0, 5],
          extraCssText:"z-index: 100",
        },
        color: ["#13B9FB"],
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 8,
            yAxisIndex: [0],
            zoomLock: false,
          },
        ],

        grid: {
          top: "3%",
          left: "3%",
          right: "12%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          name: '吨标煤',
          nameTextStyle:{
              color: '#fff'
          },
          type: "value",
          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
          splitLine: {//分割线配置
            lineStyle: {
              opacity:.2
            }
          }
        },
        yAxis: {
          type: "category",
          // boundaryGap: false,
          data: ['宁波石化','长兴经开','临安天目','建德高新','宁波石化','长兴经开','临安天目','建德高新'],

          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#0ECEF8",
                  },
                  {
                    offset: 1,
                    color: "#0571E9",
                  },
                ]),
              },
            },
            showBackground: true,
            data: [1632,1721,2231,2341,2908,3872,4623,4723],
          },
        ],
      };
      this.myChart8.setOption(this.option8);
      this.autoPlay(_this.myChart8, _this.option8, 'timer8')
    },
    filterTag(value, row) {
      return row.cityName === value;
    },
    filterTag1(value, row) {
      return row.level === value;
    },
    getDateTime (value) {
      let now = new Date(value)
      let year = now.getFullYear() // 年
      let month = now.getMonth() + 1 // 月
      let day = now.getDate() // 日
      let hour = now.getHours() // 时
      let minutes = now.getMinutes() // 分
      let seconds = now.getSeconds() // 秒
      let clock = year + '-'
      if (month < 10) clock += '0'
      clock += month + '-'
      if (day < 10) clock += '0'
      clock += day
    //   clock += day + ' '
    //   if (hour < 10) clock += '0'
    //   clock += hour + ':'
    //   if (minutes < 10) clock += '0'
    //   clock += minutes + ':'
    //   if (seconds < 10) clock += '0'
    //   clock += seconds
      return clock
    },
    mapAutoPlay(myChart, option, timer) {
      let _this = this
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        if (param.componentType === "series") {
          flag = false;
          clearInterval(timer);
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.dataIndex;
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          // 高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
        }
      });

      // 图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      // 高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      timer = setInterval(chartHover, 5000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000);
          flag = true;
        }
      });
      myChart.on("click", function (param) {
        if (param.componentType === 'series') {
          console.log(param.data);
          _this.$router.push({
            name: "zfParkOverviewDetailtwin",
            query: {
              parkCode: param.data[5],
              parkName: param.data[6],
              longitude: param.data[0],
              latitude: param.data[1],
              year: _this.date,
            },
          });
        }
      });
    },
    // 饼状图自动播放
    autoPlay(myChart, option, timer) {
      var that = this;
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        flag = false;
        clearInterval(that[timer]);
        //取消之前高亮图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });

        charPiecurrentIndex = param.dataIndex;
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        //高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      that[timer] = setInterval(chartHover, 3000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          that[timer] = setInterval(chartHover, 3000);
          flag = true;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background: #041565;
}
.box{
    padding: 10px;
}
.box1 {
  background-image: url("../../../../assets/img/industry/zfParkOverviewTwo2/lbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 4px;
  margin-top: 15px;
  padding: 10px;
}
.box2 {
  background-image: url("../../../../assets/img/industry/zfParkOverviewTwo/园区总览框@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 10px;
}
.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.content {
  //   padding: 10px 0px 0px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 45%;
    margin-top: 10px;
  }
  .content-body-right {
    width: 55%;
  }
}
.card {
  padding: 5px 0;
  margin-top: 0;
  > div {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../../../../assets/img/industry/zfParkOverviewTwo/园区数据框@2x.png");
    width: 16%;
    float: left;
    margin: 0 0.4%;
    height: 160px;
    padding: 25px;
    font-weight: 600;
    > div {
      overflow: hidden;
    }
    > div:first-child img {
      width: 40%;
      float: left;
    }
    > div:first-child div {
      width: 60%;
      float: left;
      text-align: center;
      margin-top: 28px;
      font-size: 30px;
      background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    > div:last-child {
      margin-top: 10px;
      text-align: center;
      font-size: 16px;
      color: #e5fbff;
    }
  }
  > div:first-child {
    margin-left: 0;
  }
  > div:last-child {
    margin-right: 0;
  }
}
.topAll {
  overflow: hidden;
  > div:first-child {
    float: left;
    width: 40%;
  }
  > div:nth-child(2) {
    float: right;
    width: 59%;
  }
}
.box3 {
  padding: 10px;
  background-image: url("../../../../assets/img/industry/框尺寸1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.box4{
    padding: 10px;
    background-image: url("../../../../assets/img/industry/zfIndustrialChainMa/Industrial chain overview box.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.box5{
    padding: 10px;
    background-image: url("../../../../assets/img/industry/bingkuang.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 14px;
  > div {
    float: left;
    color: #52ccff;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
  }
  > div:last-child {
    float: right;
    font-size: 12px;
  }
}
.content_title {
  font-size: 14px;
  padding: 15px 0;
  color: #52ccff;
  >span:first-child {
    display: inline-block;
    width: 5px;
    height: 16px;
    background-color: #1490fc;
    vertical-align: bottom;
  }
  >span:last-of-type {
    font-weight: 700;
    margin-left: 5px;
  }
}
.selectActive {
  border: 1px solid #52ccff;
  background-image: linear-gradient(
    rgba(0, 180, 255, 0.05),
    rgba(0, 180, 255, 0.4)
  );
  font-weight: 600;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #00155a !important;
}
.content-body-right /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
      font-size: 12px;
    }
  }
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
    }
  }
}
.content-body /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
.content-body-right /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
#tableColor /deep/ .el-table__body {
  width: 100% !important;
}
#tableColor1 /deep/ .el-table__body {
  width: 100% !important;
}
</style>
<style>
.black {
  background-color: #041565 !important;
}
</style>
